import {
  Card,
  Form,
  List,
  message,
} from 'antd';
import React, { Component } from 'react';

import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import { StateType } from './model';
import { BasicListItemDataType } from './data.d';
import styles from './style.less';
import Constants from '../../../../src/utils/Constants';

interface MessageProps extends FormComponentProps {
  manageMessage: StateType;
  dispatch: Dispatch<any>;
  loading: boolean;
}
interface MessageState {
  visible: boolean;
  done: boolean;
  current?: Partial<BasicListItemDataType>;
}
@connect(
  ({
    manageMessage,
    loading,
  }: {
    manageMessage: StateType;
    loading: {
      models: { [key: string]: boolean };
    };
  }) => ({
    manageMessage,
    loading: loading.models.manageMessage,
  }),
)
class Message extends Component<MessageProps, MessageState> {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'manageMessage/fetch',
      payload: {
        page: 1,
        size: 10,
        status: 1,
        appCode: Constants.APPCODE
      },
    });
  }

  render() {
    const {
      manageMessage: { list, pagination },
      loading,
      dispatch,
    } = this.props;

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      onChange: (page: number, pageSize: number) => {
        dispatch({
          type: 'manageMessage/fetch',
          payload: {
            page,
            size: pageSize,
            status: 1,
            appCode: Constants.APPCODE
          },
        });
      },
      onShowSizeChange: (page: number, pageSize: number) => {
        dispatch({
          type: 'manageMessage/fetch',
          payload: {
            page,
            size: pageSize,
            status: 1,
            appCode: Constants.APPCODE
          },
        });
      }
    };

    const ListContent = ({
      data: { rectime },
    }: {
      data: BasicListItemDataType;
    }) => (
        <div className={styles.listContent}>
          <div className={styles.listContentItem}>
            <span>发布时间</span>
            <p>{rectime}</p>
          </div>
        </div>
      );

    return (
      <>
        <PageHeaderWrapper>
          <div className={styles.standardList}>
            <Card
              className={styles.listCard}
              bordered={false}
              title={`共${pagination.total}条消息`}
              style={{ marginTop: 24 }}
              bodyStyle={{ padding: '0 32px 40px 32px' }}
            >
              <List
                size="large"
                rowKey="id"
                loading={loading}
                pagination={paginationProps}
                dataSource={list}
                renderItem={item => (
                  <List.Item
                    actions={[
                      <a onClick={() => {
                        dispatch({
                          type: 'manageMessage/remove',
                          payload: {
                            id: item.id, onSuccess: () => {
                              message.info('删除成功！');
                              dispatch({
                                type: 'manageMessage/fetch',
                                payload: {
                                  page: pagination.current,
                                  size: pagination.pageSize,
                                  status: 1,
                                  appCode: Constants.APPCODE
                                },
                              });
                            }
                          },
                        });
                      }}>
                        删除
                      </a>,
                    ]}
                  >
                    <List.Item.Meta
                      description={item.content}
                    />
                    <ListContent data={item} />
                  </List.Item>
                )}
              />
            </Card>
          </div>
        </PageHeaderWrapper>
      </>
    );
  }
}

export default Form.create<MessageProps>()(Message);
